<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<title>Wildflat website for high end mobiles,like samsung nokia mobile website templates for free | Shortcodes :: w3layouts</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" type="image/x-icon" href="mobile/images/fav-icon.png" />
		<link href="mobile/css/style.css" rel="stylesheet" type="text/css"  media="all" />
		<meta name="keywords" content="Wildflat iphone web template, Andriod web template, Smartphone web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
	</head>
	<body>
		<!----start-wrap---->
		<!------start-768px-menu---->
			<div id="page">
					<div id="header">
						<a class="navicon" href="#menu"> </a>
					</div>
					<nav id="menu-left">
						
					</nav>
			</div>
		<!------start-768px-menu---->
			<!----start-header---->
			<div class="header" id="move-top">
				<div class="wrap">
				<div class="header-left">
					<!----start-logo---->
					<div class="logo">
						<a href="index.html"><img src="mobile/images/logo.png" title="wildflat" /> </a>
					</div>
					<!----//End-logo---->
				</div>
				</div>
				<div class="clear"> </div>
			</div>
			<!----//End-header---->
			<!----start-blog---->
			<div class="blog">
				<div class="wrap">
					<div class="blog-left">
						<div class="blog-left-head">
							<span> </span>
							<h1>SHORTCODES</h1>
						</div>
						<!----start-shortcode-grids---->
						<div class="shortcode-grids">
								<div class="shortcode-grid-row1">
									<div class="alert1">
										<div class="alert1-left">
											<p><span>Error</span> - Your Alert!</p>
										</div>
										<div class="alert1-right">
											<a href="#"><span> </span></a>
										</div>
										<div class="clear"> </div>
									</div><!---end-alert1---->
									<div class="alert2">
										<div class="alert2-left">
											<p><span>Info </span> - Your Alert!</p>
										</div>
										<div class="alert2-right">
											<a href="#"><span> </span></a>
										</div>
										<div class="clear"> </div>
									</div><!---end-alert2---->
									<div class="alert3">
										<div class="alert3-left">
											<p><span>Succes</span> - Your Alert!</p>
										</div>
										<div class="alert3-right">
											<a href="#"><span> </span></a>
										</div>
										<div class="clear"> </div>
									</div><!---end-alert3--->
									<div class="alert4">
										<div class="alert4-left">
											<p><span>Notice</span> - Your Alert!</p>
										</div>
										<div class="alert4-right">
											<a href="#"><span> </span></a>
										</div>
										<div class="clear"> </div>
									</div><!---end-alert4---->
								</div><!---end-shortcode-grid-row1--->
								<div class="shortcode-grid-row1">
								</div><!---end-shortcode-grid-row1--->
							</div>
							<div class="clear"> </div>
							<div class="shortcode-grids-row2">
								<div class="shortcode-grid-row2">
									<ul class="arows">
										<li class="icon01"><p><span> </span>Arrow List - Aenean nisl orci</p></li>
										<li class="icon02"><p><span> </span>Arrow List2 -  Lorem ipsum dolor</p></li>
										<li class="icon03"><p><span> </span>Arrow List3 - Consecteteur adipiscing</p></li>
										<li class="icon04"><p><span> </span>Arrow List4 - Aenean nisl orci</p></li>
										<li class="icon05"><p><span> </span>Arrow List5 - Lorem ipsum dolor</p></li>
										<li class="icon06"><p><span> </span>Arrow List6 - Consecteteur adipiscing</p></li>
									</ul>
								</div><!---//End-shortcode-grid-row2---->
								<div class="shortcode-grid-row2">
									<div class="shortcode-info-box">
										<p>It's an info box! Your title goes here.</p>
										<a href="#">PURCHAISE IT NOW</a>
									</div>
								</div><!---//End-shortcode-grid-row2---->
								<div class="shortcode-grid-row2">
									<p class="lpara">
										Lorem ipsum dolor sit amet,  consectetur adipiscing elit. Aenean nisl orcicondim entum ultrices consequa eu vehicula ac mauris.  Ut adipiscingleo nec. Lorem ipsum dolor sit amet consectetur.
									</p>
								</div><!---//End-shortcode-grid-row2---->
								<div class="clear"> </div>
							</div><!---end-shortcode-grids-row2--->
							<div class="shortcode-grids-row3">
								<h4>Big Buttons</h4>
								<div class="shortcode-grid-row3">
									<ul class="blue-btns">
										<li class="blue-btn-normal"><input type="button" value="PURCHAISE IT NOW" /></li>
										<li class="blue-btn-hover"><input type="button" value="PURCHAISE IT NOW" /></li>
										<li class="blue-btn-active"><input type="button" value="PURCHAISE IT NOW" /></li>
									</ul>
							</div><!---end-shortcode-grids-row3--->
							<div class="shortcode-grid-row3">
									<ul class="gray-btns">
										<li class="gray-btn-normal"><input type="button" value="PURCHAISE IT NOW" /></li>
										<li class="gray-btn-hover"><input type="button" value="PURCHAISE IT NOW" /></li>
										<li class="gray-btn-active"><input type="button" value="PURCHAISE IT NOW" /></li>
									</ul>
							</div><!---end-shortcode-grids-row3--->
							<div class="shortcode-grid-row3">
									<ul class="drak-btns">
										<li class="drak-btn-normal"><input type="button" value="PURCHAISE IT NOW" /></li>
										<li class="drak-btn-hover"><input type="button" value="PURCHAISE IT NOW" /></li>
										<li class="drak-btn-active"><input type="button" value="PURCHAISE IT NOW" /></li>
									</ul>
							</div><!---end-shortcode-grids-row3--->
							<div class="clear"> </div>
						</div>
						<div class="shortcode-grids-row4">
							<div class="shortcode-grid-row4">
								<h4>Standart Buttons</h4>
								<ul class="b-left">
									<li class="b-left-btn-normal"><input type="button" value="PURCHAISE IT NOW" /></li>
									<li class="b-left-btn-hover"><input type="button" value="PURCHAISE IT NOW" /></li>
									<li class="b-left-btn-active"><input type="button" value="PURCHAISE IT NOW" /></li>
								</ul>
								<ul class="g-right">
									<li class="g-left-btn-normal"><input type="button" value="PURCHAISE IT NOW" /></li>
									<li class="g-left-btn-hover"><input type="button" value="PURCHAISE IT NOW" /></li>
									<li class="g-left-btn-active"><input type="button" value="PURCHAISE IT NOW" /></li>
								</ul>
								<div class="clear"> </div>
							</div><!---//End-shortcode-grid-row4---->
						</div><!---End-shortcode-grids-row4--->
						<div class="clear"> </div>
						<!----start-shart-code-para---->
						<div class="short-codepara">
							<div class="short-codepara-grid">
								<div class="short-codepara-grid-head1">
									<span> </span>
									<h1>H1 Title</h1>
								</div>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
							</div>
							<div class="short-codepara-grid">
								<div class="short-codepara-grid-head2">
									<span> </span>
									<h2>H2 Title</h2>
								</div>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
							</div>
							<div class="short-codepara-grid">
								<div class="short-codepara-grid-head3">
									<span> </span>
									<h3>H3 Title</h3>
								</div>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
							</div>
							<div class="short-codepara-grid">
								<div class="short-codepara-grid-head4">
									<span> </span>
									<h4>H4 Title</h4>
								</div>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
							</div>
							<div class="short-codepara-grid">
								<div class="short-codepara-grid-head5">
									<span> </span>
									<h5>H5 Title</h5>
								</div>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
							</div>
							<div class="short-codepara-grid">
								<div class="short-codepara-grid-head6">
									<span> </span>
									<h6>H6 Title</h6>
								</div>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
							</div>
						</div>
						<!----//End-shart-code-para---->
						<!----//End-shortcode-grids---->
					</div>
					</div>
					<div class="blog-right">
						<div class="wrap">
						<div class="blog-right-head">
							<span> </span>
							<h3>CaTEGORIES</h3>
						</div>
						<div class="blog-right-accordinations">
						</div>
						<!----start-tags---->
						<div class="blog-right-head">
							<span> </span>
							<h3>Tag's</h3>
						</div>
						<div class="tags-for">
									<ul>
										<li><a href="#">Art</a></li>
										<li><a href="#">WebDesign</a></li>
										<li><a href="#">Logotypes</a></li>
										<li><a href="#">Photo</a></li>
										<li><a href="#">Video</a></li>
										<li><a href="#">Other</a></li>
										<li><a href="#">WEb</a></li>
										<div class="clear"> </div>
									</ul>
						</div>
						<!----//End-tags---->
						<!----start-comments---->
						<div class="blog-comments">
							<div class="blog-right-head">
								<span> </span>
								<h3>Last Comments</h3>
							</div>
							<div class="blog-comment-grids">
								<div class="blog-comment-grid">
									<div class="blog-comment-grid-left">
										<img src="mobile/images/admin-pic1.jpg" alt="" />
									</div>
									<div class="blog-comment-grid-right">
										<a href="#">Endy Brown</a>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
									</div>
									<div class="clear"> </div>
								</div>
								<div class="blog-comment-grid">
									<div class="blog-comment-grid-left">
										<img src="mobile/images/admin-pic2.jpg" alt="" />
									</div>
									<div class="blog-comment-grid-right">
										<a href="#">Millana Watson</a>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
									</div>
									<div class="clear"> </div>
								</div>
								<div class="blog-comment-grid">
									<div class="blog-comment-grid-left">
										<img src="mobile/images/admin-pic3.jpg" alt="" />
									</div>
									<div class="blog-comment-grid-right">
										<a href="#">Andrew Haching</a>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
									</div>
									<div class="clear"> </div>
								</div>
								<div class="blog-comment-grid">
									<div class="blog-comment-grid-left">
										<img src="mobile/images/admin-pic4.jpg" alt="" />
									</div>
									<div class="blog-comment-grid-right">
										<a href="#">Bruse Loome</a>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
									</div>
									<div class="clear"> </div>
								</div>
							</div>
						</div>
						<!----start-Comments---->
					</div>
					<div class="clear"> </div>
				</div>
			</div>
			<!----//End-blog---->
			<!----start-contact---->
			<div class="contact" id="contact">
				<div class="wrap">
					<div class="contact-left">
						<div class="contact-head">
								<span> </span>
								<h3>Contact US</h3>
						</div>
						<form>
							<div class="form-left">
								<input type="text" placeholder="Name" required />
								<input type="text" placeholder="Email" required />
								<input type="text" placeholder="Phone" required />
							</div>
							<div class="form-right">
								<textarea rows="2" cols="70" onfocus="if(this.value == 'Comment') this.value='';" onblur="if(this.value == '') this.value='Comment';" >Comment</textarea>
							</div>
							<div class="clear"> </div>
							<input type="submit" value="Send latter" />
							<div class="clear"> </div>
						</form>
					</div>
					<div class="contact-right">
						<div class="contact-head">
								<span> </span>
								<h3>FLICKR STREAM</h3>
						</div>
						<div class="flicker-grids">
							<ul>
								<li><a href="#"><img src="mobile/images/f1.jpg" alt="" /></a></li>
								<li><a href="#"><img src="mobile/images/f2.jpg" alt="" /></a></li>
								<li><a href="#"><img src="mobile/images/f3.jpg" alt="" /></a></li>
								<li><a href="#"><img src="mobile/images/f4.jpg" alt="" /></a></li>
								<li><a href="#"><img src="mobile/images/f5.jpg" alt="" /></a></li>
								<li><a href="#"><img src="mobile/images/f6.jpg" alt="" /></a></li>
							</ul>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
			</div>
			<!---- start-top-navigation------>
			<div class="navgation-links">
			   	<a name="menu"> </a>
			   			<ul>
							<li class="active"><a href="#work">Work</a></li>
							<li><a href="#about">About</a></li>
							<li><a href="#services">Services</a></li>
							<li><a href="#news">News</a></li>
							<li><a href="#contact">Contact</a></li>
							<li><a href="blog.html">Blog</a></li>
						</ul>
			   </div>
			<!---- //End-top-navigation------>
			<!---- start-footer---->
			<div class="footer">
				<div class="wrap"> 
				<div class="footer-left">
					<h2>FANKS FOR WATCHING, <span>I hope you enjoyed it</span></h2>
				</div>
				<div class="footer-right">
					<ul>
						<li><a class="youtube" href="#"><span> </span></a></li>
						<li><a class="skye" href="#"><span> </span></a></li>
						<li><a class="flicker" href="#"><span> </span></a></li>
						<li><a class="rss" href="#"><span> </span></a></li>
						<li><a class="twitter" href="#"><span> </span></a></li>
						<li><a class="dribbble" href="#"><span> </span></a></li>
						<div class="clear"> </div>
					</ul>
				</div>
				<div class="clear"> </div>
				</div>
			</div>
			<!---- //End-footer---->
			<!----start-copy-right---->
			<div class="copy-right">
				<div class="wrap">
					<p>Template by <a href="http://w3layouts.com/">W3layouts</a></p>
				    <a href="#move-top" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"> </span></a>
				</div>
			</div>
			<!----//End-copy-right---->
		<!----//End-wrap---->
	</body>
</html>

